<template>
  <div class="content">
    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <!-- 左侧按钮 -->
          <mt-switch></mt-switch>
          <!-- 右侧内容 -->
          <div class="right-con">
            <img src="../../images/ipone.jpg" alt="">
            <div class="price">
              <p class="title">苹果手机</p>
              <p class="number">
                <span class="num-price">￥99</span>
                <shopCarNum class="shopCarNum"></shopCarNum>
                <a href="#">删除</a>
              </p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="mui-card">
      <div class="mui-card-content">
        <div class="mui-card-content-inner">
          <div class="account">
            <p>总计(不含运费)</p>
            <p>
              已勾选商品
              <span class="color">1</span>件,总价
              <span class="color">￥99</span>元
            </p>
          </div>
          <mt-button type="danger">去結算</mt-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
const API_PROXY = "https://bird.ioliu.cn/v1/?url=";
import shopCarNum from "../shopCarNum/shopCarNum.vue";
export default {
  data() {
    return {
      goodList: []
    };
  },
  created() {
    this.getGoodList();
  },
  methods: {
    getGoodList() {
      var idArr = [];
      this.$store.state.car.forEach(element => {
        idArr.push(element.id);
      });

      if (idArr.length < 0) {
        return;
      }

      this.$http
        .get(
          API_PROXY +
            "https://api.douban.com/v2/movie/subject/" +
            idArr.join(",")
        )
        .then(result => {
          this.goodList = result.body;
          console.log(this.goodList);
        });
    }
  },
  components: {
    shopCarNum
  }
};
</script>

<style lang="scss" scoped>
.content {
  background-color: #eee;
  overflow: hidden;
  img {
    height: 80px;
  }
  .mui-card-content-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    .right-con {
      display: flex;
      .price {
        margin-left: 5px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .title {
          color: black;
          font-size: 14px;
          font-weight: bold;
        }
        .number {
          .num-price {
            color: red;
            font-size: 14px;
            font-weight: bold;
          }
          .shopCarNum {
            margin: 0 5px;
          }
        }
      }
    }
  }
  // 结算
  .account {
    .color {
      color: red;
      font-size: 16px;
      font-weight: bold;
    }
  }
}
</style>

